/*
 * @Author: xianfuyou
 * @Date: 2022-04-06 09:10:49
 * @LastEditors: your name
 * @LastEditTime: 2022-04-07 11:39:02
 * @Description: file content
 */
import React, { useEffect, useState } from 'react'
import { Modal, Row, Col, Form, Input, List, Button, message, Table } from 'antd'
import { CloseCircleFilled, FormOutlined, DeleteFilled } from '@ant-design/icons';
import ButtonWarpCpn from '../CommBtn/CommBtn'
import './css/Model.css'

// 新增职位
export default function AddFollowType(props) {
  const { isShow, pCancel } = props
  const [jobLists, setJobLists] = useState([
    { key: '1', jobname: '电话跟进' },
    { key: '2', jobname: '上门拜访' },
    { key: '3', jobname: 'QQ交谈' },
    { key: '4', jobname: 'Email邮件' }
  ])
  // 删除自定义选项值
  const [delDefined, setDelDefined] = useState(false)
  // 新增自定义参数
  // const [option, setOption] = useState(null)
  // 操作按钮的状态改变，保存取消与添加
  const [flag, setFlag] = useState(false)
  // 当前修改的职称
  const [nowJob, setNowJob] = useState(null)
  const [form] = Form.useForm()
  // 新增自定义选项值
  const addJobList = () => {
    console.log('新增自定义选项值')
    addOption()
  }
  // 自定义选项值参数
  const addOption = () => {
    const nowOption = form.getFieldValue('optionName')
    let flag = false
    jobLists.map(item => {
      if (item.jobname === nowOption) {
        flag = true
      }
    })
    flag ? message.warning('已存在此项!') : setJobLists(jobLists.concat([{ 'key': '5', 'jobname': nowOption }]))
    form.resetFields()
  }
  //取消 
  const cancel = () => {
    setFlag(false)
    form.resetFields()
  }
  // 保存
  const saveJob = () => {
    const saveLists = jobLists.map(item => {
      if (item.key === nowJob.key) {
        item.jobname = form.getFieldValue('optionName')
      }
      return item
    })
    console.log(saveLists)
    setJobLists(JSON.parse(JSON.stringify(saveLists)))
    form.resetFields()
  }
  // 编辑此项
  const editNow = (record) => {
    // console.log(record)
    setNowJob(record)
    setFlag(true)
    form.setFieldsValue({ 'optionName': record.jobname })
  }
  // 删除此项
  const delNow = (record) => {
    // console.log(record)
    const resJobLists = jobLists.filter(item => {
      return item.key != record.key
    })
    setJobLists([...resJobLists])
  }


  const jobcolumns = [
    {
      title: '类型',
      dataIndex: 'jobname',
      key: 'jobname',
      width: 375
    },
    {
      title: '管理',
      dataIndex: 'manager',
      key: 'manager',
      width: 150,
      render: (manager, record) => {
        return <div>
          <FormOutlined onClick={() => { editNow(record) }} style={{ margin: '0px 3px', color: '#3b78ce', cursor: 'pointer' }} />
          <DeleteFilled onClick={() => { delNow(record) }} style={{ margin: '0px 3px', color: '#d20000', cursor: 'pointer' }} />
        </div>
      }
    }
  ]
  return (
    <div className='addjob'>
      <Modal
        className='xfy_dep_add_modal AddJob'
        title="删除自定义选项值"
        okText="新增"
        cancelText="关闭"
        visible={delDefined}
        onOk={addJobList}
        onCancel={() => { setDelDefined(false) }}
        destroyOnClose={true}
        forceRender={true}
        zIndex={3000}
      >
        <Form form={form}>
          <Row>
            <Col style={{ fontWeight: '700', marginBottom: '15px' }}>自定义选项值</Col>
            <Col span={24}>
              <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 8 }} label="参数" name="optionName">
                <Input size="small" />
              </Form.Item>
            </Col>
            <Col span={18} offset={4} className={'handleBtn'}>
              {flag ? <><Button style={{ backgroundColor: '#448aca', color: '#fff', border: '0px', width: '80px', fontWeight: '700' }} onClick={() => { saveJob() }}>保存</Button>
                <Button style={{ backgroundColor: '#505050', color: '#fff', border: '0px', width: '80px', fontWeight: '700' }} onClick={() => { cancel() }}>取消</Button></> :
                <Button style={{ backgroundColor: '#448aca', color: '#fff', border: '0px', width: '80px', fontWeight: '700' }} onClick={() => { addOption() }}>添加</Button>
              }
            </Col>
            <Col style={{ marginTop: '10px' }}>
              <Table
                pagination={false}
                size="small"
                columns={jobcolumns}
                dataSource={jobLists}
              />
            </Col>
          </Row>
        </Form>
      </Modal>
      {/* 自定义选项值 */}
      <Modal
        className='xfy_dep_add_modal AddJob'
        title="自定义选项值"
        okText="新增"
        cancelText="关闭"
        visible={isShow}
        onOk={addJobList}
        onCancel={() => { pCancel(false) }}
        destroyOnClose={true}
        forceRender={true}
        zIndex={2000}
      >
        <Form form={form} labelCol={{ span: 4, offset: 2 }} wrapperCol={{ span: 14 }}>
          <Row>
            <Col style={{ fontWeight: '700', marginBottom: '15px' }}>自定义选项值</Col>
            <Col span={24}>
              <Form.Item label="新增选项值" name="optionName">
                <Input size="small" />
              </Form.Item>
            </Col>
            <Col span={24} style={{}}>
              <Form.Item label="已有选项值">
                <List
                  style={{ border: '0px', maxHeight: '300px', overflow: 'auto', backgroundColor: '#fff' }}
                  size="small"
                  bordered
                  dataSource={jobLists}
                  footer={<Button style={{ color: '#fff', backgroundColor: '#ff0000', border: '0px' }} size="small" onClick={() => { setDelDefined(true) }}>删除自定义选项值</Button>}
                  renderItem={(item, index) => <List.Item style={{ border: '0px', borderBottom: '1px dashed #eff0ef' }}>{item.jobname}</List.Item>}
                />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </div>
  )
}
